<template>

	<view class="tabContent" :style="{height:config.scrollHeight+'px'}" style="overflow: hidden;">
		<view class="navBox">
			<u-navbar :title="titleName" style="z-index: 99;" :fixed="false" :safeAreaInsetTop="true">
				<view class="u-nav-slot" slot="left">
				</view>
				<view class="u-nav-slot" slot="right">
					<m-capsule></m-capsule>
				</view>
			</u-navbar>

			<view style="background-color: #fff;">
				<u-tabs :current="activeTab" :list="module.treeTypes" keyName="treeTypeName" lineColor="#51d0d0"
					:activeStyle="{color:'#51d0d0',fontWeight:'600',transform:'scale(1.05)'}"
					@click="scrollToSection"></u-tabs>
			</view>

		</view>


		<!-- 菜单分类明细 -->
		<scroll-view :style="{height: scrollHeight + 'px'}" style="padding: 10px;" scroll-y scroll-with-animation
			@scroll="onScroll" :scroll-into-view="currentSection">
			<view :id="'section'+index" class="menu" v-for="(treeType,index) in module.treeTypes">
				<view class="menu-title">
					<text>{{treeType.treeTypeName}}</text>
				</view>
				<u-grid col="4">
					<u-grid-item v-for="(menu,pIndex) in treeType.pages" @click="checkOutMenu(menu)">
						<view class="x-c" style="padding: 10rpx;">
							<uni-icons :fontFamily="menu.CustomFont" :size="24"
								:color="menu.AP_Colour">{{ $utils.toUniCode(menu.PIC_PH) }}</uni-icons>
						</view>
						<text class="grid-text">{{ getAbbrev(menu.APFunName) }}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</scroll-view>


	</view>
</template>

<script>
	export default {
		props: {
			config: {
				type: Object,
				default: {
					tabbarHeight: 0,
					scrollHeight: 500
				}
			}
		},
		data() {
			return {
				titleName: '',
				dynamicOffset: 0, // 吸顶偏移量
				module: {}, // 当前模块
				activeTab: 0, // 当前Tab
				currentSection: 'section0', // 滚动ID
				sectionsTop: [],
				scrollHeight: 500,
			};
		},

		created() {
			let that = this;
			// 获取dynamicOffset
			let offset = 44 + that.$u.sys().statusBarHeight;
			that.dynamicOffset = offset;

			that.scrollHeight = that.config.scrollHeight;
			let modules = that.$store.state.appConfigInfo.APPModules;
			console.log(modules);
			if (!that.$utils.isEmpty(modules)) {
				let currModuleID = that.$store.state.CurrModuleID;
				that.module = modules.find(item => item.ModuleID == currModuleID);
				that.titleName = that.module.ModuleName;
			}
		},
		mounted() {
			let that = this;
			setTimeout(() => {
				that.getScollHeightFun();
				that.calculateSectionTops();
			}, 200)
		},
		onUnload() {
			this.$store.commit('ChangeAndSetStateData', {
				Name1: 'appConfigInfo.routePageCurrent',
				data: 1
			});
		},
		methods: {
			getScollHeightFun() {
				let that = this;
				uni.createSelectorQuery().select('.navBox').boundingClientRect(data => {
					let scrollHeight = that.config.scrollHeight - data.height;

					that.scrollHeight = scrollHeight;
				}).exec()
			},

			// 一行最多7字 超过截断(合理定义菜单名称)
			getAbbrev(menuName) {
				let result = '';
				if (menuName.length > 7) {
					result = menuName.substring(0, 7);
				} else {
					result = menuName;
				}
				return result;
			},

			// 跳转菜单分类节点
			scrollToSection(item) {
				this.activeTab = item.index;
				this.currentSection = `section${item.index}`;
				console.log(this.currentSection);
			},

			// 滚动页面时候重新触发计算当前Tab
			onScroll(e) {
				const scrollTop = e.detail.scrollTop;
				this.updateActiveTab(scrollTop);
			},

			// 计算每块区域的scrollTop
			calculateSectionTops() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.menu').boundingClientRect((rects) => {
					this.sectionsTop = rects.map(rect => rect.top);
				}).exec();
			},

			// 重新计算当前Tab
			updateActiveTab(scrollTop) {
				const offset = 0;
				for (let i = 0; i < this.sectionsTop.length; i++) {
					let st = 0;
					if (i == 0) {
						st = scrollTop + this.dynamicOffset + 54;
					} else {
						st = scrollTop + this.dynamicOffset + 54 + i * 10;
					}
					if (st + offset >= this.sectionsTop[i] && (i === this.sectionsTop.length - 1 || st +
							offset < this.sectionsTop[i + 1])) {
						this.activeTab = i;
						break;
					}
				}
			},

			// 进入当前点击菜单页面
			checkOutMenu(menu) {
				let currModuleID = this.$store.state.CurrModuleID;
				let path = menu.AP_Link;
				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'Menu',
					data: menu
				});

				// WMS模块:1.H5页面跳转;2.非H5页面按正常配置路径跳转;
				if (currModuleID == 4 && path.indexOf('hybrid') > -1) {
					path = '/st_wms/BoxCode/list'
				};
				// 页面跳转待配置
				uni.navigateTo({
					url: path
				})
			},

			// 退出当前页面
			CloseShopPage() {
				uni.navigateBack({
					delta: 999
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$h-padding: 5px;
	$v-padding: 10px;
	$radius: 5px;

	.sv {
		padding: $v-padding $h-padding;
		height: calc(100vh - (50px + env(safe-area-inset-bottom)) - (44px + 44px + env(safe-area-inset-top)) - 20px);
	}

	.tabContent {
		display: flex;
		flex-direction: column;
		background-color: #f2f1f6;

		.menu {
			padding: $v-padding $h-padding;
			margin-bottom: $v-padding;
			background-color: #ffffff;
			border-radius: $radius;

			&-title {
				padding-left: 10px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 100%;
				height: 35px;
				font-size: 14px;
				font-weight: 500;
			}
		}
	}

	.grid-text {
		font-size: 12px;
		color: #909399;
		padding: 5px 0 10px 0;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>